<template>
	<view class="page">
		<view class="my-top">
			<!-- 用户信息 -->
			<view class="user-info" style="position: relative;padding-top:100rpx;padding-bottom: 80rpx;">
				<view class="portrait">
					<image :src="dataInfo.headimg"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{dataInfo.nickname}}</text>
					</view>
					<view class="rank">
						<text>ID：{{dataInfo.id}}</text>
					</view>
					<!-- <view class="flex flex-align" style="color: #fff;font-size: 24rpx;">
						代理 
					</view> -->
				</view>
				<view class="" style="position: absolute;right: 30rpx;">
					<!-- <view class="" @click="onCode">
						<text class="iconfont icon-saoyisao" style="font-size: 40px;color:#fff"></text>
					</view> -->
					<view class="" style="text-align: center;" @click="getRule">
						<text class="iconfont icon-share" style="font-size: 32px;color:#fff"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="teamInfo">
			<view class="title">团长概况</view>
			<view class="flex flex-wrap teamList">
				<view class="list" @click="goUrl('/pages/ConsumeRecord/ConsumeRecord_1?type=1')">
					<view class="price">{{Info.total_reward||0.00}}</view>
					<view class="wenzi">余额(元)</view>
				</view>
				<view class="list" @click="goUrl('/pages/ConsumeRecord/ConsumeRecord_1?type=3')">
					<view class="price">{{dataInfo.balance3||0.00}}</view>
					<view class="wenzi" style="color: #f20;font-weight: bold;">红包充值(元)</view>
				</view>
				<view class="list" @click="goUrl('/pages/MyOrderList/tuanOrder?type=0')">
					<view class="price">{{Info.total_order_count||0.00}}</view>
					<view class="wenzi">总订单</view>
				</view>
				<view class="list" @click="goUrl('/pages/tuanzhang/dailiList?type=4&status=2')">
					<view class="price">{{Info.total_user_count||0.00}}</view>
					<view class="wenzi">团长数</view>
				</view>
				<view class="list" @click="goUrl('/pages/tuanzhang/hexiao?type=2&status=2')">
					<view class="price">{{Info.yesterday_user_look||0.00}}</view>
					<view class="wenzi">昨日观看人数</view>
				</view>
				<view class="list" @click="goUrl('/pages/tuanzhang/hexiao?type=3&status=2')">
					<view class="price">{{Info.today_user_look||0.00}}</view>
					<view class="wenzi">今日观看人数</view>
				</view>
				<view class="list" @click="goUrl('/pages/tuanzhang/dailiList?type=3&status=2')">
					<view class="price">{{Info.user_count||0.00}}</view>
					<view class="wenzi">会员数</view>
				</view>
			</view>
		</view>
		<view class="teamInfo xiangqing">
			<view class="title">今日详情</view>
			<view class="flex flex-wrap teamList">
				<view class="list">
					<view class="price">{{Info.toady_total_order_count||0.00}}</view>
					<view class="wenzi">订单总数(笔)</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_pay_order_count||0.00}}</view>
					<view class="wenzi">有效订单(笔)</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_pay_user_count||0.00}}</view>
					<view class="wenzi">付款人数</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_pay_amount||0.00}}</view>
					<view class="wenzi">销售额</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_new_user||0.00}}</view>
					<view class="wenzi">新增会员数</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_order_sale||0.00}}</view>
					<view class="wenzi">售后订单(笔)</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_order_forecast_amount||0.00}}</view>
					<view class="wenzi">预估收入</view>
				</view>
				<view class="list">
					<view class="price">{{Info.toady_user_visitor||0.00}}</view>
					<view class="wenzi">今日访客</view>
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="header flex flex-align flex-bt">
				<view class="left">我的团单</view>
				<view class="right flex flex-align" @click="goUrl('/pages/MyOrderList/tuanOrder?type=0')">
					<view class="">查看详情</view>
					<tui-icon name="arrowright" color="#999" :size="24"></tui-icon>
				</view>
			</view>
			<view class="flex">
				<view class="list" @click="goUrl('/pages/MyOrderList/tuanOrder?type=1')">
					<view class="icon">
						<text class="iconfont icon-daifahuo"></text>
						<text class="num" v-if="Info.order_status1!=0">{{Info.order_status1>99?'99+':Info.order_status1}}</text>
					</view>
					<view class="title">
						<text>待配送</text>
					</view>
				</view>
				<view class="list" @click="goUrl('/pages/MyOrderList/tuanOrder?type=2')">
					<view class="icon">
						<text class="iconfont icon-daifukuan"></text>
						<text class="num" v-if="Info.order_status2!=0">{{Info.order_status2>99?'99+':Info.order_status2}}</text>
					</view>
					<view class="title">
						<text>待签收</text>
					</view>
				</view>
				<view class="list" @click="goUrl('/pages/MyOrderList/tuanOrder?type=3')">
					<view class="icon">
						<text class="iconfont icon-daishouhuo"></text>
						<text class="num" v-if="Info.order_status3!=0">{{Info.order_status3>99?'99+':Info.order_status3}}</text>
					</view>
					<view class="title">
						<text>待提货</text>
					</view>
				</view>
				<view class="list" @click="goUrl('/pages/MyOrderList/tuanOrder?type=4')">
					<view class="icon">
						<text class="iconfont icon-tuikuan"></text>
						<!-- <text class="num">22</text> -->
					</view>
					<view class="title">
						<text>已完成</text>
					</view>
				</view>
				
			
			</view>
		</view>
		<view class="shequUser flex flex-align flex-bt" @click="goUrl('/pages/tuanzhang/hexiao?type=1&status=2')">
			<view class="left">社区用户</view>
			<view class="right flex flex-align">
				<view class="">待核销</view>
				<tui-icon name="arrowright" color="#999" :size="24"></tui-icon>
			</view>
		</view>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 630rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content">分享码</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="isRule = false"></text>
						</view>
					</view>
					<view class="rule-content">
						<image :src="quhuoImg" mode="" style="width: 400rpx;height: 400rpx;margin: 0 auto;display: block;"></image>
						<view class="" style="color:#999;text-align: center;margin: 40rpx 0 20rpx;"></view>
						<!-- <view class="btns" @click="downLoad">保存到相册</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="qrimg">
			<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
				:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
				:onval="onval" :loadMake="loadMake" @result="qrR" />
		</view>
	</view>
</template>

<script>
	import zbCode from '@/components/zb-code/zb-code.vue'
	export default {
		components: {
			zbCode,
		},
		data() {
			return {
				scrollTop: 0,
				isHotline: false,
				dataInfo: '',
				goodsList: [],
				page: 1,
				isRule:false,
				show:false,
				isLogin:false,
				Info:'',
				quhuoImg:'',
				
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				src: '', // 二维码生成后的图片地址或base64
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '/static/logo.jpg', // 二维码图标
				iconsize: 20, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				
			};
		},
	
		onShow() {
			let that = this
			that.getInfo()
			that.getdata()
		},
		onLoad() {
			let that = this
		},
		methods: {
			goUrl(e){
				this.tui.href(e)
			},
			qrR(res){
				this.quhuoImg = res
			},
			getRule(){
				let that = this
				that.isRule = true
				// that.getQuhuoma()
			},
			onCode() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.tui.href(res.result)
					}
				});
			},
			downLoad() {
				let that = this
				uni.getSetting({ //获取用户的当前设置
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum()
						} else {
							uni.authorize({ //重新发起获取授权
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum()
								},
								fail: () => {
									uni.showToast({
										title: '请打开保存相册权限，再点击保存相册分享',
										icon: 'none',
										duration: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			
			},
			saveImageToPhotosAlbum() {
				let that = this
				let base64 = this.quhuoImg.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								// 	title: '保存成功',
								that.isRule =false
								that.tui.toast('保存成功')
							},
							fail: function(err) {
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						//console.log(err)
					}
				})
			
			},
			getQuhuoma() {
				let that = this
				that.tui.request("api.auth.live/qrcodeWechat", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if (res.code == 1) {
						that.quhuoImg = res.data.url
					}
				}).catch((res) => {
			
				})
			},
			getdata() {
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.dataInfo = res.data
						that.val =that.tui.faceUrl()+'#/?inviter_code='+ res.data.inviter_code
						console.log(that.val)
					}
				}).catch((res) => {

				})
			},
			getInfo(){
				let that = this
				that.tui.request("api.auth.live/communityCenter", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.Info = res.data.info
					}
				}).catch((res) => {
				
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
		position: absolute;
		width: 100%;
		// height: 100%;
		padding-bottom: 100rpx;
	}
	.my-top{
		position: relative;
		width: 100%;padding-bottom: 80rpx;
		background: linear-gradient(to left,$base,$base);
		overflow: hidden;
		/* 用户信息 */
		.user-info{
			display: flex;
			align-items: center;
			padding: 0 5%;
			height: 120rpx;
			margin-top: 40rpx;
			/* #ifdef APP-PLUS */
			margin-top: 130rpx;
			/* #endif */
			
			.portrait{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
					border: 4rpx solid #FFFFFF;
					box-sizing: border-box;
				}
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 70%;
				height: 100%;
				.nickname{
					width: 100%;
					padding: 10rpx 0;
					text{
						color: #FFFFFF;
						font-size: 28rpx;
					}
				}
				.rank{
					display: flex;
					align-items: center;
					height: 30rpx;
					text{
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 10rpx;
					}
				}
			}
		}
		/* 关注区 */
		
		/* vip */
		
	}
	.teamInfo{background: #fff;margin: -30rpx 30rpx 30rpx;border-radius: 10rpx;padding: 30rpx;position: relative;z-index: 1;text-align: center;
		.title{font-weight: bold;margin-bottom: 20rpx;}
		.list{width: 33.3%;margin: 20rpx 0;
			.price{color: #f20;margin-bottom: 10rpx;font-size: 28rpx;font-weight: bold;}
			.wenzi{color: #999;font-size: 24rpx;}
		}
	}
	.xiangqing{margin-top: 30rpx;
		.list{width: 25%;
			.price{color: #333;}
			.wenzi{color: #999;}
		}
	}
	.order-info{
		width: 94%;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;padding:30rpx 0 40rpx;
		.header{padding:0 20rpx 30rpx 30rpx;
			.left{font-weight: bold;}
			.right{
				view{font-size: 24rpx;color: #999;}
			}
		}
		.list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 100%;
			.icon{
				position: relative;
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 38rpx;
					color: #333333;
				}
				.num{
					position: absolute;
					right: -20rpx;
					top: -24rpx;
					width: 36rpx;
					line-height: 36rpx;
					text-align: center;
					font-size: 10px;
					color: $base;
					border: 2rpx solid $base;
					border-radius: 100%;
					background-color: #FFFFFF;
				}
			}
			.title{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				text{
					color: #333333;
					font-size: 24rpx;
				}
			}
		}
	}
	.shequUser{background: #fff;margin: 20rpx 30rpx;padding: 20rpx;border-radius: 10rpx;
		view{font-size: 24rpx;color: #999;}
	}
	.rule-win{
		.rule-content{background: #fff;
			padding: 20rpx 4%;
			text-align: left;
			text{
				font-size: 26rpx;
				color: #555555;
				text-align: left;
				line-height: 50rpx;
			}
		}
		.btns {
			width: 280rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			background: $base;
			margin: 20rpx auto;
		}
	}
</style>